<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">
      <el-steps :active="active" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="地址信息"></el-step>
      </el-steps>
      <br />

      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method === 'view' ? 'readonly' : ''"
        :disabled="method === 'view'" label-width="120px">
        <el-row :gutter="15">
          <div v-show="active == 1" style="margin-top: 20px">
            <el-col :span="12">
              <el-form-item label="发布人" prop="publisher.id" :rules="[
                  {
                    required: true,
                    message: '发布人ID不能为空',
                    trigger: 'blur',
                  },
                ]">
                <GridSelect title="选择发布人" labelName="nikeName" labelValue="id" :value="inputForm.publisher.id"
                  :limit="1" @getValue="
                    (value) => {
                      inputForm.publisher.id = value;
                    }
                  " :columns="[
                    {
                      prop: 'id',
                      label: '主键',
                    },
                    {
                      prop: 'phone',
                      label: '手机号(账号唯一)',
                    },
                    {
                      prop: 'nikeName',
                      label: '昵称',
                    },
                  ]" :searchs="[
                    {
                      prop: 'phone',
                      label: '手机号(账号唯一)',
                    },
                  ]" dataListUrl="/userinfo/tUserInfo/list" entityBeanName="tUserInfo"
                  queryEntityUrl="/userinfo/tUserInfo/queryById">
                </GridSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属门店" prop="store.id" :rules="[
                  {
                    required: true,
                    message: '所属门店不能为空',
                    trigger: 'blur',
                  },
                ]">
                <GridSelect title="选择所属门店" labelName="storeName" labelValue="id" :value="inputForm.store.id" :limit="1"
                  @getValue="
                    (value) => {
                      inputForm.store.id = value;
                    }
                  " :columns="[
                    {
                      prop: 'storeName',
                      label: '门店名称',
                    },
                    {
                      prop: 'officeAddress',
                      label: '办公地址',
                    },
                    {
                      prop: 'storeContactNumber',
                      label: '门店联系电话',
                    },
                    {
                      prop: 'legalName',
                      label: '联系人',
                    },
                    {
                      prop: 'contactPhoneNumber',
                      label: '联系人电话',
                    },
                  ]" :searchs="[
                    {
                      prop: 'storeName',
                      label: '门店名称',
                    },
                    {
                      prop: 'storeContactNumber',
                      label: '门店联系电话',
                    },
                  ]" dataListUrl="/distributor/vDistributor/list" entityBeanName="vDistributor"
                  queryEntityUrl="/distributor/vDistributor/queryById">
                </GridSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务类型" prop="serviceType" :rules="[]">
                <el-select v-model="inputForm.serviceType" placeholder="请选择" style="width: 100%">
                  <el-option label="美容装饰" value="1"></el-option>
                  <el-option label="维修保养" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标题" prop="title" :rules="[]">
                <el-input v-model="inputForm.title" placeholder="请填写标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="entryName" :rules="[]">
                <el-input v-model="inputForm.entryName" placeholder="请填写项目名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目描述" prop="entryDescription" :rules="[]">
                <el-input type="textarea" v-model="inputForm.entryDescription" placeholder="请填写项目描述"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面图片" prop="coverPhoto" :rules="[]">
                <el-upload ref="coverPhoto" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/serviceitems/vServiceItems`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.coverPhoto = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.coverPhoto = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="coverPhotoArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="服务项目图片" prop="projectPicture" :rules="[]">
                <el-upload ref="projectPicture" v-if="visible" list-type="picture-card"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/serviceitems/vServiceItems`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      showImg(file.url);
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.projectPicture = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.projectPicture = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="9" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 9 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="projectPictureArra">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目视频" prop="entryVideo" :rules="[]">
                <el-upload ref="entryVideo" v-if="visible"
                  :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/serviceitems/vServiceItems`"
                  :headers="{ token: $cookie.get('token') }" :on-preview="
                    (file, fileList) => {
                      $window.location.href =
                        (file.response && file.response.url) || file.url;
                    }
                  " :on-success="
                    (response, file, fileList) => {
                      inputForm.entryVideo = fileList
                        .map(
                          (item) =>
                            (item.response && item.response.url) || item.url
                        )
                        .join('|');
                    }
                  " :on-remove="
                    (file, fileList) => {
                      $http
                        .post(
                          `/sys/file/webupload/deleteByUrl?url=${
                            (file.response && file.response.url) || file.url
                          }`
                        )
                        .then(({ data }) => {
                          $message.success(data.msg);
                        });
                      inputForm.entryVideo = fileList
                        .map((item) => item.url)
                        .join('|');
                    }
                  " :before-remove="
                    (file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`);
                    }
                  " multiple :limit="5" :on-exceed="
                    (files, fileList) => {
                      $message.warning(
                        `当前限制选择 5 个文件，本次选择了 ${
                          files.length
                        } 个文件，共选择了 ${
                          files.length + fileList.length
                        } 个文件`
                      );
                    }
                  " :file-list="entryVideoArra">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">添加相关附件</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否为免费项目" prop="whetherFreeService" :rules="[]">
                <el-select v-model="inputForm.whetherFreeService" placeholder="请选择" style="width: 100%">
                  <el-option label="收费服务" value="0"></el-option>
                  <el-option label="免费服务" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="是否为推荐服务" prop="whetherRecommendedServices" :rules="[]">
                <el-select v-model="inputForm.whetherRecommendedServices" placeholder="请选择是否为推荐服务" size="small"
                  style="width: 100%">
                  <el-option label="否" value="0"></el-option>
                  <el-option label="是" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="上架状态" prop="shelfStatus" :rules="[]">
                <el-select v-model="inputForm.shelfStatus" placeholder="请选择上架状态" size="small" style="width: 100%">
                  <el-option label="未上架" value="0"></el-option>
                  <el-option label="已上架" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="出售状态" prop="saleStatus" :rules="[]">
                <el-select v-model="inputForm.saleStatus" placeholder="请选择出售状态" size="small" style="width: 100%">
                  <el-option label="未售" value="0"></el-option>
                  <el-option label="已售" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否共享" prop="isShare" :rules="[]">
                <el-select v-model="inputForm.isShare" placeholder="请选择共享状态" size="small" style="width: 100%">
                  <el-option label="不共享" value="0"></el-option>
                  <el-option label="共享" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="是否为离职数据" prop="resignationData" :rules="[]">
                <el-select v-model="inputForm.resignationData" placeholder="请选择" style="width: 100%">
                  <el-option label="在职数据" value="0"></el-option>
                  <el-option label="离职数据" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否复制数据" prop="copyData" :rules="[]">
                <el-select v-model="inputForm.copyData" placeholder="请选择" style="width: 100%">
                  <el-option label="原始数据" value="0"></el-option>
                  <el-option label="复制数据" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item
                label="原始数据ID"
                prop="originalId"
                :rules="[
                    {required: true, message:'原始数据ID不能为空', trigger:'blur'}
                  ]"
              >
                <el-input
                  v-model="inputForm.originalId"
                  placeholder="请填写原始数据ID"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="首页置顶天数" prop="topSettingDays" :rules="[]">
                <el-input v-model="inputForm.topSettingDays" placeholder="请填写首页置顶天数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首页置顶时间" prop="topSettingTimes" :rules="[]">
                <el-date-picker style="width: 100%" v-model="inputForm.topSettingTimes" type="datetime"
                  format="HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="置顶到大首页" prop="whetherTopHome" :rules="[]">
                <el-select v-model="inputForm.whetherTopHome" placeholder="请选择" style="width: 100%">
                  <el-option label="置顶" value="0"></el-option>
                  <el-option label="不置顶" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="首页是否显示" prop="homeDisplay" :rules="[]">
                <el-select v-model="inputForm.homeDisplay" placeholder="请选择" style="width: 100%">
                  <el-option label="显示" value="0"></el-option>
                  <el-option label="不显示" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="审核状态" prop="auditStatus" :rules="[]">
                <el-select v-model="inputForm.auditStatus" placeholder="请选择" style="width: 100%">
                  <el-option label="待审核" value="0"></el-option>
                  <el-option label="已通过" value="1"></el-option>
                  <el-option label="已拒绝" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="12" v-if="inputForm.auditStatus == 2">
              <el-form-item label="拒绝原因" prop="reasonRejection" :rules="[]">
                <el-input type="textarea" v-model="inputForm.reasonRejection" placeholder="请填写拒绝原因"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注信息" prop="remarks" :rules="[]">
                <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="逻辑删除标记" prop="deleteFlag" :rules="[]">
                <el-select v-model="inputForm.deleteFlag" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in $dictUtils.getDictList('del_flag')" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </div>

          <div v-show="active == 2" style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="服务地址" prop="serviceAddress" :rules="[]">
                <el-input type="textarea" v-model="inputForm.serviceAddress" ref="handleinput" id="handleinput"
                  placeholder="请填写服务地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度" prop="longitude" :rules="[]">
                <el-input v-model="inputForm.longitude" placeholder="请填写经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="latitude" :rules="[]">
                <el-input v-model="inputForm.latitude" placeholder="请填写纬度"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="地图" prop="">
                <div ref="container" id="containepic"></div>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="active !== 1" style="margin-top: 12px" @click="upper">上一步</el-button>
        <el-button v-if="active !== 2" style="margin-top: 12px" @click="next">下一步</el-button>
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import GridSelect from "@/components/gridSelect";
  export default {
    data() {
      return {
        title: "",
        method: "",
        visible: false,
        active: 1,
        loading: false,
        coverPhotoArra: [],
        entryVideoArra: [],
        projectPictureArra:[],
        inputForm: {
          id: "",
          publisher: {
            id: "",
          },
          store: {
            id: "",
          },
          serviceType: "",
          title:"",
          entryName: "",
          entryDescription: "",
          coverPhoto: "",
          entryVideo: "",
          serviceAddress: "",
          longitude: "",
          latitude: "",
          whetherFreeService: "",
          whetherRecommendedServices: "",
          shelfStatus: "",
          saleStatus: "",
          isShare: "",
          resignationData: "",
          copyData: "",
          originalId: "",
          topSettingDays: "",
          topSettingTimes: "",
          whetherTopHome: "",
          homeDisplay: "",
          auditStatus: "",
          reasonRejection: "",
          remarks: "",
          deleteFlag: "",
        },
        markersArray: [],
      };
    },
    components: {
      GridSelect,
    },
    methods: {
      showImg(url) {
        this.$hevueImgPreview(url);
      },
      next() {
        this.active++;
      },
      upper() {
        this.active--;
      },
      initMap(longitude, latitude) {
        var that = this;
        let address = "";
        let lat = "36.752508224779746";
        let logt = "119.97121810913086";
        if (!longitude) {
          let lat = latitude;
          let logt = longitude;
        }
        if (this.inputForm.latitude === "") {
          var center = new qq.maps.LatLng(lat, logt);
        } else {
          var center = new qq.maps.LatLng(
            this.inputForm.latitude,
            this.inputForm.longitude
          );
        }
        var map = new qq.maps.Map(document.getElementById("containepic"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        }); //此处是点击地图后生成的地标名称
        var geocoder = new qq.maps.Geocoder({
          complete: function (res) {
            that.deleteOverlays();
            map.setCenter(res.detail.location);
            var marker = new qq.maps.Marker({
              map: map,
              position: res.detail.location,
            });
            that.markersArray.push(marker);
          },
        });

        qq.maps.event.addListener(map, "click", function (event) {
          that.deleteOverlays();
          // this.latitude = event.latLng.getLat();
          // this.longiistude = event.latLng.getLng();
          // console.log(this.longiistude, this.latitude);
          that.inputForm.longitude = event.latLng.getLng();
          that.inputForm.latitude = event.latLng.getLat();
          var position = new qq.maps.LatLng(
            that.inputForm.latitude,
            that.inputForm.longitude
          );
          var marker = new qq.maps.Marker({
            map: map,
            position: position,
          });
          that.markersArray.push(marker);
        });
        document
          .getElementById("handleinput")
          .addEventListener("blur", function () {
            console.log("1111");
            geocoder.getLocation(that.inputForm.serviceAddress);
          });
      },
      deleteOverlays() {
        if (this.markersArray) {
          for (var i in this.markersArray) {
            this.markersArray[i].setMap(null);
          }
          this.markersArray.length = 0;
        }
      },
      init(method, id) {
        this.active = 1;
        this.method = method;
        this.inputForm.id = id;
        if (method === "add") {
          this.title = `新建服务项目信息表`;
        } else if (method === "edit") {
          this.title = "修改服务项目信息表";
        } else if (method === "view") {
          this.title = "查看服务项目信息表";
        }
        this.coverPhotoArra = [];
        this.entryVideoArra = [];
        this.projectPictureArra = [];
        this.visible = true;
        this.loading = false;
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields();
          if (method === "edit" || method === "view") {
            // 修改或者查看
            this.loading = true;
            this.$http({
              url: `/serviceitems/vServiceItems/queryById?id=${this.inputForm.id}`,
              method: "get",
            }).then(({ data }) => {
              this.inputForm = this.recover(this.inputForm, data.vServiceItems);
              this.initMap(this.inputForm.longitude, this.inputForm.latitude); 
              this.inputForm.coverPhoto.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.coverPhotoArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                  
                }
              });
              this.inputForm.projectPicture.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.projectPictureArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.inputForm.entryVideo.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.entryVideoArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.loading = false;
            });
          } else {
            this.initMap();
          }
        });
      },
      // 表单提交
      doSubmit() {
        this.$refs["inputForm"].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$http({
              url: `/serviceitems/vServiceItems/save`,
              method: "post",
              data: this.inputForm,
            }).then(({ data }) => {
              this.loading = false;
              if (data && data.success) {
                this.visible = false;
                this.$message.success(data.msg);
                this.$emit("refreshDataList");
              }
            });
          }
        });
      },
    },
  };
</script>
<style lang="less">
  #containepic {
    width: 750px;
    height: 500px;
  }

  .showPic .el-message-box__message {
    width: 800px;
    height: 800px;
    overflow: hidden;
    display: flex;

    p img {
      height: 100% !important;
      width: 100% !important;
      object-fit: contain;
    }
  }

  .imgstyle {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
</style>